<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
  />
</template>

<script setup lang='ts'>
import {GetAllCartoon} from '../../api/api'
import { h, onMounted,ref } from 'vue'
import { NTag } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

type Song = {
  cartoonName: string
  description: string
  cartoonState: string
  cartoonTag: string
  cartoonAuthor: string
  updateTime: string
}

onMounted(async () => {
  initCartoon()
})

const initCartoon = async () => {
  let cartoonData = await GetAllCartoon()
  data.value = cartoonData.manhua_list
}

var data = ref([])

const createColumns = ({
  
}: {

}): DataTableColumns<Song> => {
  return [
    {
      title: '漫画名',
      key: 'cartoonName',
    },
    {
      title: '简介',
      key: 'description',
      ellipsis: {
        tooltip: {
          contentStyle: {width:"700px"}
        }
      }
    },
    {
      title: '状态',
      key: 'cartoonState',
    },
    {
      title: '标签',
      key: 'cartoonTag',
      render (row) {
        const tags = row.cartoonTag.split('、').map((tagKey) => {
          return h(
            NTag,
            {
              type: 'info',
              bordered: false,
              round:true,
              style: {"margin-right": "2px"}
            },
            {
              default: () => tagKey
            }
          )
        })
        return tags
      }
    },
    {
      title: '作者',
      key: 'cartoonAuthor',
    },
    {
      title: '更新时间',
      key: 'updateTime',
    },
  ]
}

var columns = createColumns({})
  
const pagination:object = {pageSize:10}

</script>

<style lang='scss' scoped>
  
</style>